import React, { useEffect } from 'react';
import { useFusionTable, useSetState } from 'ahooks';
import { Button, Card, Loading} from '@alifd/next';
import { useRequest, useHistory } from 'ice';
import { getAdminList } from '@/api/user';
import Pagination from '@/components/Pagination';
import TableList from '@/components/TableList';
import styles from './index.module.scss';
const UserTable: React.FC = () => {
  const [state, setState] = useSetState({
    dataSource: [],
    visible: false,
    total: 0,
    pageNum: 1,
  });
  const { request } = useRequest(getAdminList);

  // 数据列表
  const getList = async () => {
    setState({visible: true});
    const { code, result }: any = await request({
      pageNum: state.pageNum,
      pageSize: 20,
    });
    if (!code) {
      setState({dataSource: result.data, total: result.total, visible: false});
    }
  }
  useEffect(() => {
    getList();
  }, [state.pageNum]);

  // facebook 信息
  const getFaceBook = (...args: any[]) => {
    return (
      <div>
        {args[2].facebookAvatar && <img src={args[2].facebookAvatar} className={styles.imgbox} /> && <span>{args[0].facebookNickname}</span>}
      </div>
    );
  };

  // google信息
  const getGoogle = (...args: any[]) => {
    return (
      <div>
        {args[2].googleAvatar && <img src={args[2].googleAvatar} className={styles.imgbox} /> && <span>{args[0].googleNickname}</span>}
      </div>
    );
  };

  // app 信息
  const getApp = (...args: any[]) => {
    return (
      <div>
        {args[2].headImg && <img src={args[2].headImg.url} className={styles.imgbox} />}
        {args[2].userName && <div>{args[2].userName}</div>}
      </div>
    );
  };
  // 分页
  const pageChange = (value: number)=>{
    setState({pageNum: value});
  }
  // 操作按钮
  const setCell = (value, index, record) => {
    return <div>测试</div>;
  };
  // 列表
  const userListTable = [
    {
      key: '1',
      title: 'Num',
      dataIndex: 'userNum',
    },
    {
      key: '2',
      title: '注册来源',
      dataIndex: 'userSource',
    },
    {
      key: '3',
      title: 'FaceBook信息',
      render: getFaceBook,
    },
    {
      key: '4',
      title: 'Google信息',
      render: getGoogle,
    },
    {
      key: '5',
      title: 'APP信息',
      render: getApp,
    },
    {
      key: '6',
      title: '绑定手机',
      dataIndex: 'mobile',
    },
    {
      key: '7',
      title: '注册时间',
      dataIndex: 'createTime',
      type: 'time',
    },
    {
      key: '8',
      title: '最后活跃时间',
      dataIndex: 'lastActiveTime',
      type: 'time',
    },
    {
      key: '9',
      title: '用户等级',
      dataIndex: 'level',
    },
    {
      key: '10',
      title: '用户总积分',
      dataIndex: 'userPoint',
    },
    {
      key: '11',
      title: '淘宝账号绑定',
      dataIndex: 'bindStatus',
    },
    {
      key: 'set',
      title: '操作',
      render: setCell,
    },
  ]
  return (
    <Loading tip="加载中..." visible={state.visible} >
      <Card free>
          <Card.Content>
            <TableList
                columns={userListTable}
                dataSource={state.dataSource}
              />
            <Pagination total={state.total} pageNum={state.pageNum}  pageChange={pageChange}/>
          </Card.Content>
        </Card>
    </Loading>
  );
};

export default UserTable;
